/**
 * 管理后台 - 首页 - layout
 * Author: Zeon
 * Date: 2017/8/1
 * Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    @copy-right-height: 48px;

    // 整体布局
    .layout{
        // background: #f5f7f9;
        position: relative;
        // overflow: hidden;
        .ivu-row-flex {
            flex-wrap: nowrap;
        }
    }

    // 左侧导航栏
    .layout-side-menu {
        background: #464c5b;
    }

    // 右侧操作区
    .layout-operate-side {
       padding-bottom: @copy-right-height;
       min-width: 1400px;
    }    

    // 版权文字区
    .copy-right {
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    // 侧边栏 + 内容区 伸缩同时过渡
    .ivu-col{
        transition: width .2s linear;
    }

</style>
<template>
    <div class="v-index layout" >
        <Row type="flex">

            <!-- 侧边导航栏 i-col必须放在 Row元素下面真是fuck -->
            <i-col class="layout-side-menu":span="span_left">
                <side-menu :span-left="span_left"></side-menu>
            </i-col>

            <!-- 右侧主操作区 BEGIN -->
            <i-col :span="span_right" class="layout-operate-side operate-main-wrapper" ref="operate_wrapper">

                <!-- 顶部导航栏 -->
                <nav-header @toggle-side-bar="toggleClick" @show-loading="showloading"></nav-header>

                <!-- 管理内容区子路由视图 -->
                <router-view></router-view>

                <div class="copy-right">
                    <p>2017-{{ year_now }} &copy; Powerd by PanxSoft</p>
                </div>

                <Spin fix v-if="getSpin" class="loader">
                    <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                    <div>{{ getSpinText }}</div>
                </Spin>

                <Spin fix v-if="loading_show">
                    <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                    <div>{{ loading_info }}</div>
                </Spin>

            </i-col>
            <!-- 右侧主操作区 END -->

        </Row>
        
    </div>
</template>
<script>

    import { setMinHeightToInnerHeight } from 'src/utils/dom-helper';
    import { delay } from 'src/utils/helper';
    import sideMenu from './side-menu';
    import navHeader from './nav-header';
    import { mapGetters } from "vuex";

    export default {

        components : {
            'side-menu' : sideMenu ,
            'nav-header' : navHeader
        },

        data () {
            return {
                span_left: 4,
                span_right: 20,
                loading_show : false,
                loading_info : '',
                year_now: (new Date).getFullYear()
            }
        },
        computed: {

            ...mapGetters('spinShow',[
                'getSpin',
                'getSpinText'
            ]),

            operateWrapperElem(){
                return this.$refs.operate_wrapper.$el;
            },
        },
        mounted() {
            this.setInnerMinHeight();
        },
        methods: {
            
            /**
             * 显示loading
             * @param  {Boolean} status {false代表不显示，true代表显示}
             * @param  {string} value  {loading的信息}
             * @return {undefined}
             */
            showloading(status,value){

                this.loading_show = status;

                this.loading_info = value;

            },

            toggleClick (is_bar_open) {
                if (! is_bar_open) {
                    this.span_left = 2;
                    this.span_right = 22;
                } else {
                    this.span_left = 4;
                    this.span_right = 20;
                }
            },

            setInnerMinHeight(){
                this.listenResizeSetInnerHeight();
                setMinHeightToInnerHeight(this.operateWrapperElem);
            },

            listenResizeSetInnerHeight(){
                let delaySetInnerHeight = delay(this.setInnerMinHeight.bind(this), 500);
                window.addEventListener('resize', ()=> delaySetInnerHeight());
            },

        }
    }
</script>